<template>
  <div :style="paginationStyle" class="pager-box" v-show="total > 0">
    <el-pagination
        background
        @size-change="changePageSize"
        @current-change="changePage"
        :current-page="pageIndex"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "XPagination",
  props:{
    pageSizes:{
      type:Array,
      default:()=>[10, 20, 50, 100]
    },
    layout:{
      type:String,
      default:"total, sizes, prev, pager, next, jumper"
    },
    pageIndex:{
      type:Number,
      default:1
    },
    pageSize:{
      type:Number,
      default:10
    },
    total:{
      type:Number,
      default:0
    },
    getData:{
      type:Function,
      default:function ({pageIndex,pageSize}){}
    },
    paginationStyle:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return{

    }
  },
  methods:{
    changePage(pageIndex) {
      this.pageIndex = pageIndex;
      this.getData({pageIndex:this.pageIndex,pageSize:this.pageSize});
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.changePage(1);
    },
    loadData(){
      this.changePage(1)
    },
    getpageInfo(){
      return {
        pageIndex:this.pageIndex,
        pageSize:this.pageSize,
        total:this.total
      }
    }
  }
}
</script>

<style scoped lang="scss">
.pager-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  padding-top: 10px;
}
</style>
